<template>
  <div class="container">
    <div class="index-title">{{ routeQuery.name }}</div>
    <el-row class="" style="margin-bottom: 20px">
      <el-col :span="16" align="left">
        <el-input
          v-model="searchFrom.companyName"
          placeholder="公司名称"
          style="width: 150px; margin-right: 15px"
          @change="search"
          clearable
        />
        <el-button class="ordinary" @click="search()">搜索</el-button>
      </el-col>
      <el-col :span="8" align="right">
        <el-button class="ordinary" @click="getExportBtn()">批量导出</el-button>
        <el-button class="lock" @click="btnComfirm(1)">下发确认</el-button>
        <el-button type="primary" @click="btnComfirm(2)">生成考核</el-button>
        <el-button type="primary" @click="btnComfirm(3)">变更</el-button>
      </el-col>
    </el-row>
    <div>
      <el-table
        :data="state.table_list"
        style="width: 100%"
        @selection-change="selectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          :reserve-selection="false"
        />
        <el-table-column type="index" :index="indexMethod" align="center" width="80" label="序号" />
        <el-table-column
          prop="companyName"
          align="center"
          width="200"
          label="子公司名称"
        />
        <el-table-column prop="indexCounts" align="center" label="指标数量" />
        <el-table-column prop="examineFactor" align="center" label="考核系数">
        </el-table-column>
        <el-table-column prop="planTotalScore" align="center" label="计划总得分">
        </el-table-column>
        <el-table-column prop="ensureFeedback" align="center" label="确认反馈" />

        <el-table-column prop="createUsername" align="center" label="创建人" width="80" />
        <el-table-column prop="createTime" align="center" label="创建时间" width="150" />
        <el-table-column
          prop="ensurePeopleUsername"
          align="center"
          label="确认人"
          width="80"
        />
        <el-table-column
          prop="ensureDatetime"
          align="center"
          label="确认时间"
          width="150"
        />
        <el-table-column prop="status_text" align="center" label="状态" width="100" />
        <el-table-column prop="address" fixed="right" align="center" label="操作" width="180">
          <template #default="scope">
            <span>
              <el-button
                class="ordinary"
                v-if="scope.row.status == '1' || scope.row.status == '4'"
                @click="goPlanDetail(scope.row)"
                >管理</el-button
              >
              <el-button class="ordinary" v-else @click="goPlanDetail(scope.row)"
                >查看</el-button
              >
              <el-button
                type="primary"
                v-if="scope.row.status == '1' || scope.row.status == '4'"
                @click="editExamineFactor(scope.row)"
                >考核系数</el-button
              >
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px"
        :total="pageOption.total"
        :page-size="pageOption.size"
        :current-page="pageOption.current"
        @current-change="currentChange"
        layout="total, prev, pager, next, jumper"
        align="right"
      ></el-pagination>
    </div>
    <el-dialog v-model="state.examineFactorVisible" title="编辑考核系数" width="400px">
      <div class="examine-dialog-content">
        <el-form
          :inline="true"
          :model="myForm"
          ref="ruleFormRef"
          :rules="rules"
          label-position="top"
          label-width="120px"
        >
          <el-form-item label="考核系数" prop="examineFactor">
<!--            <el-input-number
              v-model="myForm.examineFactor"
              style="width: 300px"
              :controls="false"
            />-->
          <el-input

              v-model="myForm.examineFactor"
              style="width: 300px"
              :controls="false"

              :min="0" :max="99" :maxlength="4" oninput="value=value.replace(/[^\d.]/g, '')
              .replace(/\.{2,}/g, '.')
              .replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1$2.$3')
              .replace(/^\./g, '') .replace(/^0+(\d+)/, '$1')
              .replace(/^(\d{2})\d+$/, '$1')"
          />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.examineFactorVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmFactor"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import pubFc from "@/views/examineManage/utils";
import { ElMessage, ElMessageBox } from "element-plus";
import { nextTick, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import * as api from "../../../api/zJexaminePlan";
interface Cdata {
  [propName: string]: any;
}
const searchFrom = reactive({
  //查询
  companyName: "",
});
// const refreshPage:any=inject('refreshPage', Function, true);
const route = useRoute();
const router = useRouter();
const routeQuery = route.query;
// let annualId=route.query.id;
const pageOption = reactive({
  total: 0,
  current: 1,
  size: 10,
});
const ruleFormRef = ref<any>();
const rules = reactive<any>({
  //   parentNumber: [{ required: true, message: '请选择父级', trigger: 'blur' }],
  examineFactor: [{ required: true, message: "请填写系数", trigger: "blur" }],
});
const myForm = reactive({
  examineFactor: 1,
});
let state = reactive<Cdata>({
  table_list: [],
  opType: "add", //add,edit,copy
  handleRowData: null, //正在处理的行数据
  table_loading: false,
  examineFactorVisible: false,
  company_list: [],
});
const dictDatas = reactive({}); //字典值
let selectedRows = ref<any>([]);
const search = () => {
  //搜索
  pageOption.current = 1;
  gettargetlist();
};

const getExportBtn = () => {
  //批量导出
  ElMessageBox.confirm("确定要批量导出吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
  api
    .exportZzplanlsitRequest({
      current: pageOption.current,
      size: pageOption.size,
      ...searchFrom,
      produceId: routeQuery.pid,
      examineFlag: false, //ture-考核，false-计划
    })
    .then((res) => {
      const { data, headers } = res;
      pubFc.downloadFunc(data, headers);
    });
  });
};
const goPlanDetail = (row) => {
  //进入子公司计划列表
  router.push({
    path: "/examineManage/techExamine/zzExamine/ePlanDetail",
    query: {
      id: row.id,
      name: `${routeQuery.name}-${row.companyName}`,
    },
  });
};
const indexMethod = (index)=>{
  return pageOption.size*(pageOption.current-1) +index+1
}
const selectionChange = (arr) => {
  //选中
  selectedRows.value = arr;
};
const currentChange = (page) => {
  //翻页
  pageOption.current = page;
  gettargetlist();
};
const btnComfirm = (type) => {
  let title =
    type == 1
      ? "确定下发确认？"
      : type == 2
      ? "确定生成考核？"
      : "变更后，计划状态变更为草稿，是否继续？";
  let apiName =
    type == 1
      ? "downDistributeRequest"
      : type == 2
      ? "produceExamineRequest"
      : "revertDistributeRequest";
  if (selectedRows.value.length !== 1) {
    ElMessage({
      message: "请选择一条数据！",
      type: "warning",
    });
  } else {
    ElMessageBox.confirm(title, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      // let sel_ids=selectedRows.value.map(item=>{return item.id});
      api[apiName]({
        id: selectedRows.value[0].id,
      }).then((res) => {
        if (res.data.code == 200)
          ElMessage.success(
            (type == 1 ? "下发" : type == 2 ? "生成考核" : "变更") + "成功"
          );
        gettargetlist();
      });
    });
  }
};

const editExamineFactor = (row) => {
  state.handleRowData = row;
  state.examineFactorVisible = true;
  nextTick(() => {
    myForm.examineFactor = row.examineFactor;
  });
};
// const handleCopy = () => {
//   if (selectedRows.value.length !== 1) {
//     ElMessage({
//       message: '请选择一条数据复制',
//       type: 'warning',
//     })
//   } else {
//     state.opType = 'copy'
//     state.handleRowData = selectedRows.value[0]
//     state.modalVisible = true
//   }
// }
const confirmFactor = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      api
        .updateFactorRequest({
          id: state.handleRowData.id,
          ...myForm,
        })
        .then((res) => {
          if (res.data.code == 200) {
            state.examineFactorVisible = false;
            gettargetlist();
          }
        });
    }
  });
};
const gettargetlist = () => {
  //获取table列表
  state.table_loading = true;
  api
    .childrenPlanlistRequest({
      ...searchFrom,
      produceId: routeQuery.pid, //1-中交标准指标、2-中咨标准指标
      current: pageOption.current,
      size: pageOption.size,
    })
    .then((res) => {
      state.table_loading = false;
      state.table_list = res.data.data.records;
      pageOption.total = res.data.data.total;
    });
};

gettargetlist();
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
  overflow-y: auto;
  .index-title {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e7e5e5;
    margin-bottom: 10px;
    font-size: 26px;
  }
}
.examine-dialog-content {
  padding: 20px;
}
:deep(.el-dialog__body) {
  padding: 0;
}
:deep(.el-dialog__header) {
  border-bottom: 1px solid #f1eded;
}
</style>
